---
import BaseLayout from "../layouts/BaseLayout.astro"
---

<BaseLayout childpage backtotop>
  <div class="container-fluid">
    <div class="row g-3">
      <div class="col">
        <div class="card border-0 shadow-sm">
          <div class="card-body">
            <div class="py-3">
              <div class="fs-5">
                <span class="text-danger">关键词</span> 查询到 66 个结果
              </div>
              <div class="">耗时：350ms</div>
              <hr />
            </div>
            <div class="row gap-3">
              <div class="col-12">
                <div class="row">
                  <div class="col-md-9">
                    <div class="d-flex flex-column gap-2">
                      <a
                        href="javascript:"
                        class="h4 text-decoration-none lts-ellipsis-2"
                      >
                        <span class="badge bg-warning me-1 align-text-bottom"
                          >置顶</span
                        >
                        <span class="badge bg-danger me-1 align-text-bottom"
                          >荐</span
                        >
                        adminlts 成为国内颇受欢迎的通用后台模板解决方案
                      </a>

                      <div
                        class="d-flex align-items-center justify-content-between flex-wrap gap-2"
                      >
                        <a
                          href="javascript:"
                          class="text-decoration-none link-secondary"
                        >
                          <img
                            src="img/avatar.jpg"
                            class="lts-wh-40 rounded-circle"
                            alt="作者头像"
                          />
                          <span class="">欲饮琵琶码上催</span>
                        </a>
                        <div class="">
                          <i class="bi bi-clock-fill"></i>
                          <span class="ms-1">2023/03/11</span>
                        </div>
                      </div>

                      <div class="lts-ellipsis-4">
                        基于bootstrap5
                        设计的后台模板，从1.x版本的发布，到后续2.x的埋头丰富，逐步用行动赢得了许多人的关注。目前
                        adminlts
                        在现在全是vue的时代下这种纯html模板开源且活跃的项目已经越来越少的情况下，几乎已成为开发者的不二选择。这得益于
                        adminlts本身对日常开发中的常用页面的累积外，
                        更得益于bootstrap本身具备的强大生态和bootstrap官方团队的付出。
                      </div>

                      <div class="d-flex align-items-center flex-wrap gap-2">
                        <a
                          href="javascript:"
                          class="badge rounded-pill bg-success text-white text-decoration-none"
                          >前端</a
                        >
                        <a
                          href="javascript:"
                          class="badge rounded-pill bg-primary text-white text-decoration-none"
                          >vue</a
                        >
                        <a
                          href="javascript:"
                          class="badge rounded-pill bg-warning text-white text-decoration-none"
                          >bootstrap</a
                        >
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 d-none d-md-flex">
                    <a href="javascript:" class="bg-body-tertiary">
                      <img
                        src="img/bootstrap-logo-shadow.png"
                        class="img-fluid"
                        alt="文章缩略图"
                      />
                    </a>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="d-flex flex-column gap-2">
                  <a
                    href="javascript:"
                    class="h4 text-decoration-none lts-ellipsis-2"
                  >
                    <span class="badge bg-danger me-1 align-text-bottom"
                      >荐</span
                    >
                    关于我寻找bootstrap模板这件事儿？
                  </a>

                  <div
                    class="d-flex align-items-center justify-content-between flex-wrap gap-2"
                  >
                    <a
                      href="javascript:"
                      class="text-decoration-none link-secondary"
                    >
                      <img
                        src="img/avatar.jpg"
                        class="lts-wh-40 rounded-circle"
                        alt="作者头像"
                      />
                      <span class="">欲饮琵琶码上催</span>
                    </a>
                    <div class="">
                      <i class="bi bi-clock-fill"></i>
                      <span class="ms-1">2022/07/30</span>
                    </div>
                  </div>

                  <div class="lts-ellipsis-3">
                    模板是我们做后台管理系统经常所需要的东西。虽然，我们总可以花很多时间从头开始设计自己的模板，但有现在的模板让我们套，节省我们更多时间用来摸鱼，何乐而不为呢。
                    这些现有出色模板，除了节省时间外，还附带这些好处：
                    内置常用案例的组件 跨不同视图的一致样式 内置响应式设计
                    技术支持和文档
                  </div>
                </div>
              </div>
              <div class="col-12">
                <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a
                        class="page-link"
                        href="javascript:"
                        aria-label="Previous"
                      >
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li class="page-item">
                      <a class="page-link" href="javascript:">1</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link" href="javascript:">2</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link" href="javascript:">3</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link" href="javascript:" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</BaseLayout>
